<template>
    <div>
        <h1>班级管理</h1>
        <el-button type="text" @click="openAddClasses()">新增班级</el-button>
<!-- 添加 -->
        <el-dialog title="新增班级" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="班级类型">
                    <el-col :span="5">
                    <el-select v-model="form.classesTypeId" placeholder="请选择班级类型">
                        <el-option v-for="i in type" :label="i.typeName" :value="i.id"></el-option>
                    </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="班级名称" :label-width="formLabelWidth" prop="classesName">
                    <el-input v-model="form.classesName" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="学生数量" :label-width="formLabelWidth" prop="studentCount">
                    <el-input v-model="form.studentCount" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="对应教师" :label-width="formLabelWidth" prop="teacherId">
                    <el-col :span="5">
                    <el-select v-model="form.teacherId" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="开课时间" :label-width="formLabelWidth" prop="openTime">
                    <el-col :span="5">
                    <el-date-picker v-model="form.openTime" type="date" placeholder="选择日期">
                    </el-date-picker>
                    </el-col>
                </el-form-item>

                <el-form-item label="结课时间" :label-width="formLabelWidth" prop="completionTime">
                    <el-col :span="5">
                    <el-date-picker v-model="form.completionTime" type="date" placeholder="选择日期">
                    </el-date-picker>
                    </el-col>
                </el-form-item>
<!--                <el-form-item label="班徽" :label-width="formLabelWidth" prop="logo">-->
<!--                    <el-col :span="3">-->
<!--                    &lt;!&ndash;<el-image-->
<!--                            style="width: 100px; height: 100px"-->
<!--                            :src="url"-->
<!--                            :fit="fit"></el-image>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-input v-model="form.logo" autocomplete="off"></el-input>&ndash;&gt;-->
<!--                    </el-col>-->
<!--                </el-form-item>-->
                <el-form-item label="班级状态" :label-width="formLabelWidth">
                    <el-col :span="8">
                        <el-radio v-model="form.merge" :label="0">未合班</el-radio>
                        <el-radio v-model="form.merge" :label="1">合班</el-radio>
                        <el-radio v-model="form.merge" :label="2">被合班</el-radio>
                    </el-col>
                </el-form-item>
                <el-form-item label="毕业状态" :label-width="formLabelWidth" prop="graduation">
                    <el-col :span="6">
                        <el-radio v-model="form.graduation" :label="false">未毕业</el-radio>
                        <el-radio v-model="form.graduation" :label="true">已毕业</el-radio>
                    </el-col>
                </el-form-item>
                <el-form-item label="班级说明" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.info"></el-input>  <!--autocomplete="off"-->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addClasses">确 定</el-button><!--dialogFormVisible = false-->
            </div>
        </el-dialog>
<!-- 搜索 -->
        <el-row :gutter="10">
            <el-col :span="4">
                <el-select v-model="classes.classesTypeId" placeholder="请选择班级类型" clearable @change="handleInitClasses()">
                    <el-option v-for="item in type" :key="item.id" :label="item.typeName" :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-input v-model="classes.classesName" placeholder="请输入班级名称" clearable @change="handleInitClasses()"/>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="el-icon-search" @click="handleInitClasses">搜索</el-button>
            </el-col>
        </el-row>
<!-- 列表 -->
        <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column prop="id" label="ID" width="50"></el-table-column>
            <el-table-column prop="classesName" label="班级名称" width="100"></el-table-column>
            <el-table-column prop="teacher.name" label="对应教师" width="100"></el-table-column>
            <el-table-column prop="classesType.typeName" label="班级类型" width="100"></el-table-column>
            <el-table-column prop="studentCount" label="学生数量" width="100"></el-table-column>
            <el-table-column prop="openTime" label="开课时间" width="100"></el-table-column>
            <el-table-column prop="completionTime" label="结课时间" width="100"></el-table-column>
            <el-table-column prop="info" label="班级说明" width="100"></el-table-column>
<!--            <el-table-column prop="logo" label="班徽" width="100">-->
<!--               &lt;!&ndash; <el-image-->
<!--                    style="width: 70px; height: 70px"-->
<!--                    :src="tableData.logo"-->
<!--                    :fit="fit"></el-image>&ndash;&gt;-->
<!--            </el-table-column>-->
            <el-table-column prop="merge" label="班级状态" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.merge==0?"未合班":scope.row.merge==1?"合班":"被合班"}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="graduation" label="毕业状态" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.graduation==false?"未毕业":"已毕业"}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="teacher.name" label="添加人" width="100"></el-table-column>
            <el-table-column prop="inputTime" label="添加时间" sortable width="160"></el-table-column>
            <el-table-column align="center" label="操作" width="200" :resizable="false">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit"
                               @click="openAddClasses(scope.row.id)">编辑
                    </el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete"
                               @click="handleDelete(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                layout="prev, pager, next"
                :current-page="pageNum"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                :hide-on-single-page="true"
                @current-change="handleInitClasses"
        >
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "ManageClassesView",
        data() {
            return {
                options: [],
                classes:{},
                tableData: [],
                type: [],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    classesName: '',
                    classesTypeId: '',
                    teacherId: '',
                    studentCount: '',
                    openTime:'',
                    completionTime:'',
                    info: '',
                    logo:'',
                    inputId:'',
                    merge:'',
                    graduation:'',
                    inputTime:'',
                    enable:''
                    // normal: true,
                    // sort: '0',
                },
                formLabelWidth: '100px',
                rules: {
                    classesTypeId: [
                        {required: true, message: '请选择班级类型', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入班级名称', trigger: 'blur'}
                    ],
                    // studentCount: [
                    //     {required: true, message: '请输入学生数量', trigger: 'blur'}
                    // ]
                },
                pageInfo:[],
                pageNum:1
            }
        },
        created() {
            this.handleInitClasses();
            this.getClassesType();
            // this.addClassMerge();
        },
        methods: {
            handleInitClasses(pageNum) {
                if(typeof pageNum == "number"){
                    this.pageNum = pageNum;
                }
                else{
                    this.pageNum=1;
                }
                console.log(this.classes.classesTypeId);
                this.$axios.post("/manage/classes/list",this.classes,{params:{pageNum:this.pageNum}}).then(response => {
                    this.pageInfo = response.data.data;
                    const data = response.data.data.list
                    for (var i in data) {
                        data[i]['inputTime'] = data[i]['inputTime'].replace("T", " ");
                    }
                    this.tableData = data;
                });
            },
            openAddClasses(id) {
                this.dialogFormVisible = true;
                this.$axios.get("/manage/classes/findTeacher").then(response => {
                    this.options = response.data.teacherList;
                })
                if(id){
                    this.$axios.get("/manage/classes/findById?id="+id).then(response => {
                        this.form = response.data.data;
                    });
                }
            },
            getClassesType() {
                this.$axios.get("/manage/classesType/list").then(response => {
                    this.type = response.data.data;
                });
            },
            addClasses() {
                this.dialogFormVisible = false;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$axios.post("/manage/classes/save", this.form).then(response => {
                            if (response.data.code == 10001) {
                                this.$message({
                                    showClose: true,
                                    message: '该班级名已存在',
                                    type: 'error'
                                });
                            } else if (response.data.code == 200) {
                                this.handleInitClasses();
                                this.dialogFormVisible = false;
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            handleDelete(id) {
                this.$confirm('此操作将永久删除该班级, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.get("/manage/classes/delete",{params:{id: id}}).then(response => {
                        if(response.data.code == 200){
                            this.handleInitClasses();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                        else{
                            this.$message({
                                showClose: true,
                                message: '删除出错啦',
                                type: 'error'
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // addClassMerge() {
            //     this.$router.push("classMerge");
            // }
        }

    }
</script>

<style scoped>

</style>
